<template>
    <div class="goods_detail">
        <div class="search_list">
            <h1 class="search_list_title">商品列表</h1>                  
            <ul class="list_ul">
                <li v-for="(item,index) in infos" :key="index">
                    <span style="margin-right:10px;"><img :src="item.photo" alt="" style="width:100px"></span>
                    <span>{{ item.name }}</span>
                    <span>x{{ item.num }}</span>
                    <span>{{ item.money }}</span>
                </li>   
            </ul>
            <p class="deposit">{{ miNiOrderInfo.money }}</p>
            <div class="plist-li"><p class="l"><span>订</span><span>单</span><span>状</span><span>态:</span></p>{{ miNiOrderInfo.state }}</div>
            <div class="plist-li" v-if="miNiOrderInfo.remark"><p class="l"><span>备</span><span>注:</span></p>{{ miNiOrderInfo.remark }}</div>
            <h1 class="search_detail_title">订单详情</h1>
            <ul class="plist">
                <li class="plist-li"><div class="l"><span>订</span><span>单</span><span>号:</span></div><div class="r">{{ miNiOrderInfo.orderNum }}</div></li>
                <li class="plist-li"><div class="l"><span>配</span><span>送</span><span>房</span><span>间:</span></div><div class="r">{{ miNiOrderInfo.room }}</div></li>
                <li class="plist-li"><div class="l"><span>接</span><span>收</span><span>人:</span></div><div class="r">{{ miNiOrderInfo.person }}</div></li>
                <li class="plist-li"><div class="l"><span>下</span><span>单</span><span>时</span><span>间:</span></div><div class="r">{{ miNiOrderInfo.orderTime }}</div></li>
                <li class="plist-li" v-if="miNiOrderInfo.predictTime"><div class="l"><span>预</span><span>计</span><span>送</span><span>达:</span></div><div class="r">{{ miNiOrderInfo.predictTime }}</div></li>
                <li class="plist-li"  v-if="state == 2 && miNiOrderInfo.deliveryman"><div class="l">
                    <span>配</span><span>货</span><span>员</span></div><div class="r" >{{ miNiOrderInfo.deliveryman }}</div>
                </li>
                <li class="plist-li"  v-if="state == 3 && miNiOrderInfo.deliveryman"><div class="l">
                    <span>配</span><span>货</span><span>员</span></div><div class="r" >{{ miNiOrderInfo.deliveryman }}</div>
                </li>
                <li class="plist-li" v-if="state == 3 && miNiOrderInfo.deliverymanTime"><div class="l">
                    <span>配</span><span>货</span><span>时</span><span>间:</span></div><div class="r" >{{ miNiOrderInfo.deliverymanTime }}</div>
                </li>
                <li class="plist-li"  v-if="state == 4 && miNiOrderInfo.deliveryman"><div class="l">
                    <span>配</span><span>货</span><span>员</span></div><div class="r" >{{ miNiOrderInfo.deliveryman }}</div>
                </li>
                <li class="plist-li" v-if="state == 4 && miNiOrderInfo.deliverymanTime"><div class="l">
                    <span>配</span><span>货</span><span>时</span><span>间:</span></div><div class="r" >{{ miNiOrderInfo.deliverymanTime }}</div>
                </li>
                <li class="plist-li" v-if="state == 4 && miNiOrderInfo.arriveTime"><div class="l">
                    <span>送</span><span>达</span><span>时</span><span>间:</span></div><div class="r">{{ miNiOrderInfo.arriveTime }}</div>
                </li>
            </ul>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="SeeSure" v-if="state ==1 && onoff == true">立即处理</el-button>
            <el-button type="primary" @click="Sure" v-if="state ==1 && onoff == false">确认</el-button>
            
            <el-button type="primary" @click="SeeSure" v-if="state ==2 && onoff == true">立即配送</el-button>
            <el-button type="primary" @click="Sure" v-if="state ==2 && onoff == false">确认</el-button>

            <el-button type="primary" @click="SeeSure" v-if="state ==3 && onoff == true">确认到达</el-button>
            <el-button type="primary" @click="Sure" v-if="state ==3 && onoff == false">确认</el-button>

            <el-button type="primary" @click="Sure" v-if="state ==4 || state ==5">确认</el-button>
        </div>
    </div>
</template>
<script>
import { getMiNiinfo,getMiNistate } from "@/public/js/goods.js";
export default {
  data() {
    return {
      GetInfo: JSON.parse(localStorage.getItem("GetInfo")),
      id: "",
      state: "",
      onoff: "",
      miNiOrderInfo: "",
      infos: ""
    };
  },
  watch: {
    $route(to, from) {
      this._getMiNiinfo();
    }
  },
  created() {
    this._getMiNiinfo();
  },
  methods: {
    _getMiNiinfo() {
      getMiNiinfo({ id: this.$route.query.id }).then(res => {
        console.log(res)
        this.miNiOrderInfo = res.data.miNiOrderInfo;
        this.onoff = res.data.miNiOrderInfo.onoff;
        this.state = this.miNiOrderInfo.stateI;
        this.infos = res.data.miNiOrderInfo.infos;
      });
    },
    Sure() {
      this.$router.push("/index/list_goods");
      // this._getMiNiList();
    },
    //更改订单状态
    SeeSure() {
      if (this.state >= 4) {
        return false;
      } else {
        this.state = this.state + 1;
      }
      var data = {
        id: this.$route.query.id,
        state: this.state
      };
      getMiNistate(data).then(res => {
        this.state = "";
        this.$router.push("/index/list_goods");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.goods_detail {
  width: 30%;
  padding: 20px 30px;
  .search_list {
    margin-bottom: 30px;
    .search_list_title {
      margin-bottom: 10px;
    }
    .deposit {
      text-align: center;
    }
    .list_ul {
      li {
        overflow: hidden;
        margin-bottom: 10px;
        span {
          float: left;
          height: 70px;
          line-height: 70px;
          margin-right: 40px;
        }
      }
    }
    .search_detail_title {
      margin: 10px 0;
    }

    .plist-li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-size: 15px;
      line-height: 27px;
      .l {
        width: 70px;
        margin-right: 10px;
        white-space: nowrap;
        color: #888888;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }
    }
  }
}
</style>
